<!--
 * @Description: 数据趋势页面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-02 22:54:11
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-04-16 12:04:21
 -->
<template>
  <div class="user-content">
    <div class="tab-block">
      <el-radio-group v-model="checkName" size="medium">
        <el-radio-button v-for="(item, index) in tabList" :label="item.key" :key="index">{{ item.name }}</el-radio-button>
      </el-radio-group>
    </div>
    <div class="trend-content">
      <weight v-if="checkName === 'weight'" ref="weight" />
      <sport v-if="checkName === 'sport'" ref="sport" />
      <score v-if="checkName === 'score'" ref="score" />
      <diet v-if="checkName === 'diet'" ref="diet" />
      <water v-if="checkName === 'water'" ref="water" />
      <sleep v-if="checkName === 'sleep'" ref="sleep" />
    </div>
  </div>
</template>
<script>
import weight from './trendModule/weight'
import sport from './trendModule/sport'
import sleep from './trendModule/sleep'
import score from './trendModule/score'
import diet from './trendModule/diet'
import water from './trendModule/water'
  
export default {
  components: {
    weight, sleep, sport, score, diet, water
  },
  data() {
    return {
      tabList: [
        {
          name: '体重',
          key: 'weight'
        },
        {
          name: '运动',
          key: 'sport'
        },
        // {
        //   name: '综合',
        //   key: 'score'
        // },
        {
          name: '饮食',
          key: 'diet'
        },
        {
          name: '饮水',
          key: 'water'
        },
        // {
        //   name: '睡眠',
        //   key: 'sleep'
        // }
      ],
      active: 'weight',
      checkName: 'weight'
    }
  },
  methods: {
    initData(serviceId) {
      this.serviceId = serviceId
    }
  }
}
</script>

<style>
  .user-content .trend_type {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c4c4c4;
    color: #1f2d3d;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
  }
  .user-content .trend_type span {
    padding: 10px 25px;
    border-right: 1px solid #c4c4c4;
    display: inline-block;
  }
  .user-content .trend_type span:hover, .user-content .trend_type span.active{
    color: #ffffff;
    background: #20a0ff;
  }
  .user-content .trend_type span:last-child {
    border-right: none;
  }
  .tab-block{
    width: 100%;
    height: 50px;
  }
</style>

